<template>
	<view class="mask" v-if="fatherMask == true">
		<view class="mask_content">
			<view class="mask_box">
				<view class="title">
					<view class="title_word">区域</view>
					<image src="/static/pages/index/cloose.png" mode="" class="t_img" @click="cloose"></image>
				</view>
				<view class="mask_type">省份/市区</view>
				<!--地址picker-->
				<view class="ctime" @click="choseValue">
					<text class="ctimeWord">{{ addressMessage != '' ? addressMessage : '请选择地址' }}</text>
					<image src="/static/pages/index/right.png" class="right" mode=""></image>
				</view>
				<view :status="checkStatus" v-if="lotusAddressData.visible" class="lotus-address-mask">
					<view :class="lotusAddressData.visible ? 'lotus-address-box' : 'lotus-address-box lotus-address-box-out'">
						<view class="lotus-address-action">
							<text @tap="cancelPicker" class="lotus-address-action-cancel">取消</text>
							<text @tap="chosedVal" class="lotus-address-action-affirm">确认</text>
						</view>
						<view class="lotus-address-picker-box">
							<!--省-->
							<scroll-view scroll-y :scroll-into-view="'pid' + pChoseIndex" class="lotus-address-picker-box-item">
								<view
									@tap="clickPicker(0, pIndex, pItem)"
									:id="'pid' + pIndex"
									:class="pIndex === pChoseIndex ? 'lotus-address-picker lotus-address-picker2' : 'lotus-address-picker'"
									v-for="(pItem, pIndex) in province"
									:key="pIndex"
								>
									{{ pItem }}
								</view>
							</scroll-view>
							<!--市-->
							<scroll-view scroll-y :scroll-into-view="'cid' + cChoseIndex" class="lotus-address-picker-box-item">
								<view
									@tap="clickPicker(1, cIndex, cItem)"
									:id="'cid' + cIndex"
									:class="cIndex === cChoseIndex ? 'lotus-address-picker lotus-address-picker2' : 'lotus-address-picker'"
									v-for="(cItem, cIndex) in city"
									:key="cIndex"
								>
									{{ cItem }}
								</view>
							</scroll-view>
							<!--区-->
							<!-- 	<scroll-view scroll-y :scroll-into-view="'tid'+tChoseIndex" class="lotus-address-picker-box-item">
								<view @tap="clickPicker(2,tIndex,tItem);" :id="'tid'+tIndex" :class="tIndex === tChoseIndex?'lotus-address-picker lotus-address-picker2':'lotus-address-picker'" v-for="(tItem,tIndex) in town" :key="tIndex">{{tItem}}</view>
							</scroll-view> -->
							<!--区END-->
						</view>
					</view>
				</view>

				<view >
					<view class="mask_price">时间</view>
					<view class="ctime" @click="show">
						<text class="ctimeWord">{{ birthday != '' ? birthday : '请选择时间' }}</text>
						<image src="/static/pages/index/right.png" class="right" mode=""></image>
					</view>
				</view>
				<view class="quedingCLickBox" @click="defines">
					确定
				</view>
			</view>

			<!-- <view class="mater_btn">
				<view class="mater_btn1" @click="reset">取消</view>
				<view class="mater_btn2" @click="define">确定</view>
			</view> -->
		</view>

		<view class="datetime-picker">
			<view class="mask" :class="{ show: open }" @touchmove.stop.prevent catchtouchmove="true"></view>
			<view class="wrap" :class="{ show: open }">
				<view class="picker-header" @touchmove.stop.prevent catchtouchmove="true">
					<view class="btn-picker cancel" @click="open = false">取消</view>
					<view class="btn-picker submit" @click="_onSubmit">确定</view>
				</view>
				<view class="picker-body">
					<picker-view :value="value" @change="_onChange">
						<picker-view-column>
							<view class="column-item" v-for="item in years" :key="item">{{ item + '年' }}</view>
						</picker-view-column>
						<picker-view-column>
							<view class="column-item" v-for="item in months" :key="item">{{ formatNum(item) + '月' }}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { lotusAddressJson } from './Winglau14-lotusAddress/Winglau14-lotusAddress.js';
export default {
	props: {
		fatherMask: {
			type: Boolean,
			default: ''
		},
		startYear: {
			type: Number,
			default: 2000
		},
		endYear: {
			type: Number,
			default: 2030
		}
	},
	data() {
		return {
			curriculumList: [],
			classificationList: [],
			typeShow: -1, //控制展示选中和未被选中的类型
			curriculumShow: -1, //控制展示选中和未被选中的课程类型
			cationShow: -1, //控制展示选中和未被选中的分类
			priceShow: ' ', //控制价格
			levelShow: -1, //控制级别,
			num1: '',
			search1: '',
			Pircemoney: '',
			courseTypesObj: {},
			courseTypesObjIndex: '',
			open: false,
			years: [],
			months: [],
			days: [],
			hours: [],
			minutes: [],
			currentDate: new Date(),
			year: '',
			month: '',
			day: '',
			hour: '',
			minute: '',
			value: [0, 0, 0, 0, 0],
			birthday: '',
			visible: false,
			province: [],
			city: [],
			town: [],
			provinceName: '',
			cityName: '',
			townName: '',
			type: 0, //0新增1编辑
			pChoseIndex: -1,
			cChoseIndex: -1,
			tChoseIndex: -1,
			lotusAddressData: {
				visible: false,
				provinceName: '',
				cityName: '',
				townName: ''
			},
			region: '',
			addressMessage:''
		};
	},
	onLoad() {},
	mounted() {
		this.init();
	},
	watch: {
		month() {
			this.initDays();
		}
	},
	methods: {
		cloose() {
			this.$emit('chaFatherMask', false);
		},

		//课程分类
		init() {
			let _this = this;
			this.initYears();
			this.initMonths();
			this.initDays();
			// this.initHours();
			// this.initMinutes();
			this.setSelectValue();
		},
		initYears() {
			const years = [];
			for (let year = this.startYear; year <= this.endYear; year++) {
				years.push(year);
				if (this.currentDate.getFullYear() === year) {
					this.$set(this.value, 0, year - this.startYear);
				}
			}
			this.years = years;
		},
		initMonths() {
			const months = [];
			for (let month = 1; month <= 12; month++) {
				months.push(month);
				if (this.currentDate.getMonth() + 1 === month) {
					this.$set(this.value, 1, month - 1);
				}
			}
			this.months = months;
		},
		initDays() {
			const value = this.value;
			const selectedYear = this.years[value[0]];
			const selectedMonth = this.months[value[1]];
			const days = [];
			const totalDays = new Date(selectedYear, selectedMonth, 0).getDate();
			for (let day = 1; day <= totalDays; day++) {
				days.push(day);
				if (this.currentDate.getDate() === day) {
					this.$set(value, 2, day - 1);
				}
			}
			this.days = days;
		},
		initHours() {
			const hours = [];
			for (let hour = 0; hour <= 23; hour++) {
				hours.push(hour);
				if (this.currentDate.getHours() === hour) {
					this.$set(this.value, 3, hour);
				}
			}
			this.hours = hours;
		},
		initMinutes() {
			const minutes = [];
			for (let minute = 0; minute < 60; minute++) {
				minutes.push(minute);
				if (this.currentDate.getMinutes() === minute) {
					this.$set(this.value, 4, minute);
				}
			}
			this.minutes = minutes;
		},
		show() {
			this.open = true;
		},

		hide() {
			this.open = false;
		},
		_onChange(e) {
			this.value = e.detail.value;
			this.setSelectValue();
		},
		setSelectValue() {
			const v = this.value;

			this.year = this.years[v[0]];
			this.month = this.months[v[1]];
			this.day = this.days[v[2]];
			this.hour = this.hours[v[3]];
			this.minute = this.minutes[v[4]];
		},
		_onSubmit() {
			const { year, month, day, hour, minute, formatNum } = this;
			const result = {
				year: formatNum(year),
				month: formatNum(month),
				day: formatNum(day)
				// hour: formatNum(hour),
				// minute: formatNum(minute),
			};
			// this.$emit("submit", result);
			this.birthday = `${result.year}-${result.month}`;
			// console.log(this.birthday);
			this.$emit('timesBox',this.birthday)
			this.hide();
		},
		formatNum(num) {
			return num < 10 ? '0' + num : num + '';
		},
		//控制展示选中和未被选中的类型
		typea(index, item) {
			this.typeShow = index;
			this.num1 = item.id;
			this.search1 = item.name;
		},

		//控制价格
		pricea(id, item) {
			this.priceShow = id;
			console.log(item);
			if (item.pricNum == '免费') {
				this.Pircemoney = '0';
			} else {
				this.Pircemoney = item.pricNum;
			}
		},

		//课程类型
		levelaType(index) {
			this.courseTypesObjIndex = index;
		},
		//重置
		reset() {
			this.typeShow = -1;
			this.curriculumShow = -1;
			this.cationShow = -1;
			this.priceShow = -1;
			this.levelShow = -1;
			this.courseTypesObjIndex = -1;
			this.Pircemoney = -1;
		},
		
		//取消
		cancelPicker() {
			const provinceCode = this.getTarId(this.provinceName);
			const cityCode = this.getTarId(this.cityName);
			const townCode = this.getTarId(this.townName);
			this.lotusAddressData.visible = false;
			// this.$emit('choseVal', {
			// 	province: this.provinceName,
			// 	provinceCode,
			// 	city: this.cityName,
			// 	cityCode,
			// 	town: this.townName,
			// 	townCode,
			// 	isChose: 0,
			// 	visible: false
			// });
		},
		//获取最后选择的省市区的值
		chosedVal() {
			this.type = 1;
			const provinceCode = this.getTarId(this.provinceName);
			const cityCode = this.getTarId(this.cityName);
			const townCode = this.getTarId(this.townName);
			this.lotusAddressData.visible = false;
			let isChose = 0;
			//已选省市区 isChose = 1
			if ((this.provinceName && this.cityName) || (this.provinceName && this.cityName && this.townName)) {
				isChose = 1;
			}
			console.log(this.provinceName);
			console.log(this.cityName);
			
			this.addressMessage=this.provinceName+this.cityName;
			
			this.$emit('choseVal', {
				province: this.provinceName,
				city: this.cityName,
				town: this.townName,
			});
		},
		//获取省市区value
		getTarId(name, type) {
			let id = 0;
			lotusAddressJson.map((item, index) => {
				if (item.name === name) {
					id = item.value;
				}
			});
			return id;
		},
		//获取市数据
		getCityArr(parentId) {
			let city = [];
			lotusAddressJson.map((item, index) => {
				if (item.parent === parentId) {
					city.push(item.name);
				}
			});
			return city;
		},
		//获取区数据
		getTownArr(parentId) {
			let town = [];
			lotusAddressJson.map((item, index) => {
				if (index > 34 && item.parent === parentId) {
					town.push(item.name);
				}
			});
			return town;
		},
		//初始化数据
		initFn() {
			if (!this.province.length) {
				lotusAddressJson.map((item, index) => {
					if (index <= 34) {
						this.province.push(item.name);
					}
				});
			}
			//已选择省市区，高亮显示对应选择省市区
			const p = this.lotusAddressData.provinceName;
			const c = this.lotusAddressData.cityName;
			const t = this.lotusAddressData.townName;
			//已选省
			if (p) {
				this.pChoseIndex = this.getTarIndex(this.province, p);
			}
			//已选市
			if (p && c) {
				const pid = this.getTarId(p);
				this.city = this.getCityArr(pid);
				this.cChoseIndex = this.getTarIndex(this.city, c);
			}
			//已选区
			if (p && c && t) {
				const cid = this.getTarId(c);
				this.town = this.getTownArr(cid);
				this.tChoseIndex = this.getTarIndex(this.town, t);
			}
			//未选省市区
			if (!p && !c && !t) {
				this.pChoseIndex = -1;
				this.cChoseIndex = -1;
				this.tChoseIndex = -1;
				this.city = [];
				this.town = [];
			}
		},
		//获取已选省市区
		getChosedData() {
			const pid = this.getTarId(this.provinceName, 'province');
			this.city = this.getCityArr(pid);
			const cid = this.getTarId(this.cityName, 'city');
			this.town = this.getTownArr(cid);
			//已选省市区获取对应index
			if (this.provinceName) {
				this.pChoseIndex = this.getTarIndex(this.province, this.provinceName);
			}
			if (this.cityName) {
				this.cChoseIndex = this.getTarIndex(this.city, this.cityName);
			}
			if (this.townName) {
				this.tChoseIndex = this.getTarIndex(this.town, this.townName);
			}
		},
		//选择省市区交互
		clickPicker(type, index, name) {
			//省
			if (type === 0) {
				this.pChoseIndex = index;
				this.provinceName = name;
				this.cChoseIndex = -1;
				this.tChoseIndex = -1;
				this.cityName = '';
				this.townName = '';
			}
			//市
			if (type === 1) {
				this.cChoseIndex = index;
				this.cityName = name;
				this.tChoseIndex = -1;
				this.townName = '';
			}
			//区
			if (type === 2) {
				this.tChoseIndex = index;
				this.townName = name;
			}
			//获取省市区数据
			this.getChosedData();
		},
		//获取已选省市区index
		getTarIndex(arr, tarName) {
			let cIndex = 0;
			arr.map((item, index) => {
				if (item === tarName) {
					cIndex = index;
				}
			});
			return cIndex;
		},
		//打开picker
		openPicker() {
			this.lotusAddressData.visible = true;
			this.lotusAddressData.provinceName = '广东省';
			this.lotusAddressData.cityName = '广州市';
			this.lotusAddressData.townName = '白云区';
		},
		//回传已选的省市区的值
		choseValue() {
			
			this.lotusAddressData.visible = true; //visible为显示与关闭组件标识true显示false隐藏
			
		},
		//确定
		defines() {
			if(this.provinceName==''||this.birthday==''){
				uni.showToast({
					title:"请先填写完整信息",
					icon:"none"
				})
			}else{
				this.$emit('chaFatherMask', false);
			}
			
			
		},
	},
	computed: {
		checkStatus() {
			let t = null;
			const _this = this;
			if (!_this.visible) {
				_this.visible = _this.lotusAddressData.visible;
				//获取省市区
				_this.provinceName = _this.lotusAddressData.provinceName;
				_this.cityName = _this.lotusAddressData.cityName;
				_this.townName = _this.lotusAddressData.townName;
				//生成初始化数据
				_this.initFn();
				t = _this.visible;
			}
			return t;
		}
	}
};
</script>
<style>
@import './Winglau14-lotusAddress/Winglau14-lotusAddress.css';
</style>
<style lang="scss" scoped>
.mask {
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	position: fixed;
	top: 0;
	left: 0;
	z-index: 9999999;

	.mask_content {
		width: 100%;
		height: 75%;
		position: absolute;
		bottom: 0;
		left: 0;
		background-color: #ffffff;
		border-radius: 20rpx 20rpx 0 0;
		padding-bottom: 100rpx;
		z-index: 9999999;

		.mask_box {
			width: 100%;
			height: 100%;
			overflow: hidden;
			overflow-y: scroll;
			z-index: 9999999;
		}

		.title {
			width: 100%;
			height: 68rpx;
			position: relative;

			.title_word {
				width: 100%;
				text-align: center;
				color: rgba(16, 16, 16, 100);
				font-size: 28rpx;
				line-height: 68rpx;
			}

			.t_img {
				width: 32rpx;
				height: 32rpx;
				position: absolute;
				top: 18rpx;
				right: 26rpx;
			}
		}

		.mask_type {
			color: rgba(16, 16, 16, 100);
			font-size: 26rpx;
			display: inline-block;
			margin: 46rpx 0 0 22rpx;
		}
		.ctimeWord {
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #606266;
			// margin-top: 0;
			margin-left: 10rpx;
			line-height: 72rpx;
		}
		.type_content {
			width: 80%;
			margin: 20rpx auto 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.type_con {
				width: 30%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f4f4f4;
				color: rgba(153, 153, 153, 100);
				font-size: 24rpx;
				margin-bottom: 36rpx;
				border-radius: 16rpx;
			}
		}

		.ctime {
			width: 670rpx;
			height: 72rpx;
			background: #f0f1f5;
			border-radius: 12rpx;
			margin: 40rpx auto 0;
			display: flex;
			justify-content: space-between;

			.ctimeWord {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #606266;
				// margin-top: 0;
				margin-left: 10rpx;
				line-height: 72rpx;
			}

			.right {
				width: 19rpx;
				height: 34rpx;
				margin-top: 16rpx;
				margin-right: 20rpx;
			}
		}

		.mater_btn {
			width: 85%;
			height: 80rpx;
			display: flex;
			justify-content: space-between;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);

			.mater_btn1 {
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: rgba(161, 195, 255, 100);
				border-radius: 20rpx;
				color: rgba(255, 255, 255, 100);
				font-size: 28rpx;
			}

			.mater_btn2 {
				width: 240rpx;
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				background-color: rgba(103, 158, 255, 100);
				border-radius: 20rpx;
				color: rgba(255, 255, 255, 100);
				font-size: 28rpx;
			}
		}

		.type_boxae {
			background-color: rgba(103, 158, 255, 100);
			color: rgba(255, 255, 255, 100);
			border-radius: 16rpx;
		}

		.mask_price {
			color: rgba(16, 16, 16, 100);
			font-size: 26rpx;
			display: inline-block;
			margin: 0 0 0 22rpx;
		}

		.mask_price_box {
			width: 80%;
			margin: 20rpx auto 0;
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;

			.mask_price_con {
				width: 30%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f4f4f4;
				color: rgba(153, 153, 153, 100);
				font-size: 24rpx;
				margin-bottom: 36rpx;
				border-radius: 16rpx;
				box-sizing: border-box;
			}
		}

		.mask_level {
			color: rgba(16, 16, 16, 100);
			font-size: 26rpx;
			display: inline-block;
			margin: 0 0 0 22rpx;
		}

		.mask_level_box {
			width: 80%;
			margin: 20rpx auto 0;
			display: flex;
			justify-content: space-between;

			flex-wrap: wrap;

			.mask_level_con {
				width: 30%;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background-color: #f4f4f4;
				color: rgba(153, 153, 153, 100);
				font-size: 24rpx;
				margin-bottom: 36rpx;
				border-radius: 16rpx;
				box-sizing: border-box;
			}

			.a-bxo {
				width: 30%;
			}
		}
	}
}

$transition: all 0.3s ease;
$primary: #488ee9;

.datetime-picker {
	position: relative;
	z-index: 99999999999;

	picker-view {
		height: 100%;
	}

	.mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: rgba(0, 0, 0, 0.6);
		visibility: hidden;
		opacity: 0;
		transition: $transition;
		z-index: 9999999999999;

		&.show {
			visibility: visible;
			opacity: 1;
		}
	}

	.wrap {
		z-index: 9999999999999999;
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		transition: $transition;
		transform: translateY(100%);

		&.show {
			transform: translateY(0);
		}
	}

	.picker-header {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 8px 8px;
		background-color: darken(#fff, 2%);
		background-color: #fff;
	}

	.picker-body {
		width: 100%;
		height: 420rpx;
		overflow: hidden;
		background-color: #fff;
	}

	.column-item {
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.btn-picker {
		position: relative;
		display: inline-block;
		padding-left: 10px;
		padding-right: 10px;
		box-sizing: border-box;
		text-align: center;
		text-decoration: none;
		line-height: 2;
		-webkit-tap-highlight-color: transparent;
		overflow: hidden;
		background-color: #eee;
		font-size: 14px;
		// border-radius: 2px;
		color: #000;
		cursor: pointer;
	}

	.btn-picker.submit {
		background-color: $primary;
		color: #fff;
	}
}
.lotus-address-picker {
  font-size: 26rpx;
  padding-top: 30rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  line-height: normal;
  padding-right: 30rpx;
  box-sizing: border-box;
}
.lotus-address-picker-box {
  /*display: -webkit-box;
  display: -webkit-flex;*/
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: flex-start;
  padding-top: 10rpx;
  padding-bottom: 10rpx;
}
.lotus-address-picker-box-item {
  height: 600upx;
  overflow-y: auto;
  width: 33.333%;
  padding-left: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
}
.lotus-address-picker2 {
  color: #e93b3d;
  position: relative;
}
.lotus-address-picker2:after {
  content: '';
  position: absolute;
  right: 0;
  top: 65%;
  transform: translateY(-35%) rotate(-45deg);
  width: 20rpx;
  height: 10rpx;
  border-left-width: 4rpx;
  border-bottom-width: 4rpx;
  border-left-style: solid;
  border-bottom-style: solid;
  border-left-color: #e93b3d;
  border-bottom-color: #e93b3d;
}
.lotus-address-mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background: rgba(0, 0, 0, 0.5);
}
.lotus-address-box {
  background: #fff;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
.lotus-address-action {
  font-size: 30rpx;
  /*display: -webkit-box;
  display: -webkit-flex;*/
  display: flex;
  align-items: center;
  justify-content: center;
  justify-content: space-between;
  padding: 25rpx 30rpx;
  position: relative;
}
.lotus-address-action:after {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1px solid #eee;
  color: #eee;
  transform-origin: 0 0;
  transform: scaleY(0.5);
}
.lotus-address-action:before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1px solid #eee;
  color: #eee;
  transform-origin: 0 100%;
  transform: scaleY(0.5);
}
.lotus-address-action-cancel {
  color: #969696;
}
.lotus-address-action-affirm {
  color: #e93b3d;
}
.quedingCLickBox{
	width: 150rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	color: #FFFFFF;
	background-color: #1855F6;
	margin: 200rpx auto 0;
	border-radius: 60rpx;
}
</style>
